<script setup>
defineProps({
  title: String,
  subTitle: String
})
</script>

<template>
  <div class="home-panel">
    <div class="head">
      <!-- 主标题和副标题 -->
      <h3>
        <span>{{ title }}</span>
      </h3>
      <small>
        <span>{{ subTitle }}</span>
      </small>
    </div>
    <!-- 主体内容区域 -->
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-panel {
  .head {
    padding: 40px 0 30px;
    // display: flex;
    // align-items: flex-end;
    text-align: center;
    h3 {
      flex: 1;
      font-size: 24px;
      font-weight: normal;
      // margin-left: 6px;
      margin-bottom: 20px;
      height: 35px;
      line-height: 35px;
      color: #666;

      span {
        &::before,
        &::after {
          content: '|';
          margin: 0 20px;
          color: $helpColor;
        }
      }
    }
    small {
      font-size: 16px;
      color: #999;
    }
  }
}
</style>
